<template>
  <div>
    <!-- <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="printSelectOrder" size="small">批量打印</el-button>
        <el-button type="primary" @click="printAgain" size="small">重新打印</el-button>
        <el-button type="primary" size="small" @click="is_excel = true">导入 excel</el-button>
        <div v-if="is_excel">
          <el-dialog
            title="导入模板"
            :visible.sync="is_excel"
            width="90%"
            class="is_excel"
            :before-close="handleClose"
          >
            <excel_box ref="excelBox" down="0" @select="onSelectList"></excel_box>
          </el-dialog>
        </div>
        <el-button type="primary" size="small" @click="createBillFlag = true">账单创建</el-button>
        <el-button type="primary" size="small" @click="SupplierOrders">一键向供应商下单</el-button>
        <el-dialog title="账单创建" :visible.sync="createBillFlag" width="60%">
          <span style="padding-bottom: 10px;font-size: 20px;display: block">请选择采购订单的配送日期对应的日期范围:</span>
          <el-form ref="form" :model="createForm">
            <el-form-item label="配送日期">
              <el-date-picker
                v-model="createForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="createBill">立即创建</el-button>
              <el-button @click="createBillFlag = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row> -->
    <!-- <el-table
      :data="orderList"
      stripe
      max-height="600"
      @selection-change="handleSelectionChange"
      style="min-width: 100%"
    >
      <el-table-column type="selection" width="30" fixed></el-table-column>
      <el-table-column type="index" width="50" fixed></el-table-column>
      <el-table-column prop="buyId" label="采购单编号" min-width="120" fixed sortable></el-table-column>
      <el-table-column prop="buyerName" label="采购商" min-width="90" fixed sortable></el-table-column>
      <el-table-column prop="deliveryTime" min-width="100" label="配送日期" sortable></el-table-column>
      <el-table-column prop="buySeq" label="批次" min-width="80" sortable>
        <template slot-scope="scope">{{$dic.buySeqOptions[scope.row.buySeq].label}}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="80" sortable>
        <template slot-scope="scope">{{$dic.buyerOption[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="deliveryType" label="配送方式" min-width="100" sortable>
        <template slot-scope="scope">{{$dic.deliveryTypeMap[scope.row.deliveryType]}}</template>
      </el-table-column>
      <el-table-column prop="genPrice" label="总价预估" min-width="100" sortable></el-table-column>
      <el-table-column prop="buyTime" label="下单时间" min-width="150" sortable></el-table-column>
      <el-table-column prop="needNote" label="需求信息" max-width="100"></el-table-column>
      <el-table-column prop="remarks" label="备注" max-width="100"></el-table-column>
      <el-table-column prop="contact" label="联系人" min-width="80"></el-table-column>
      <el-table-column prop="telephone" label="电话" min-width="110"></el-table-column>
      <el-table-column prop="totalPrice" label="操作" fixed="right" min-width="120">
        <template slot-scope="scope">
          <el-button round size="mini" type="text" @click="checkDetail(scope.row)">详情</el-button>
          <template>
            <el-dropdown trigger="click" @command="handleGoodsCommand">
              <el-button type="text" size="small">
                <i class="el-icon-more"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="{type: 'handleDelete', row: scope.row, index: scope.$index}"
                >取消</el-dropdown-item>
                <el-dropdown-item
                  :command="{type: 'return', row: scope.row, index: scope.$index}"
                >退货</el-dropdown-item>
                <el-dropdown-item :command="{type: 'resetBill', row: scope.row}">账单更新</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="打印" fixed="right" min-width="120">
        <template slot-scope="scope">
          <el-button round size="mini" type="primary" @click="printTable(scope.row)">打印</el-button>
          <el-button type="text" @click="printBuyOrder(scope.row)">飞鹅</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <div v-if="dialogTableVisible">
      <el-dialog
        title="采购单详情"
        :visible.sync="dialogTableVisible"
        :before-close="buyOrderClose"
        width="90%"
      >
        <v-goods-table
          :goods-list="goodsList"
          :title="checkedItem"
          ref="buyOrderInfo"
          @change-list="onChangeList"
        ></v-goods-table>
      </el-dialog>
    </div>
    <!-- <el-dialog title="采购单打印" :visible.sync="dialogPrint" width="90%">
      <v-print ref="printOrderTable" :value="checkedItem" :concise-list="goodsList"></v-print>
    </el-dialog> -->
  </div>
</template>

<script>
import Request from "../../supplyrequest.js";
import vGoodsTable from "./supply_goods_table.vue";
import vPrint from "./supply_print.vue";
import store from "@/store";
import Excel_box from "@/components/pds/common/excel_box";
import { importTable } from "@/api/supply/supplyImportTable";
import { createBillBatch, resetBill } from "../../../api/supply/supply_buyorder.js";

export default {
  data: function() {
    return {
      dialogTableVisible: false,
      dialogPrint: false,
      goodsList: [],
      totalGoods: 0,
      goodsPage: {
        pageSize: 20,
        pageNo: 1
      },
      request: new Request(),
      checkedItem: {},
      activeName: "first",
      multipleSelection: [],
      headHtmlPrint: "",
      bodyHtmlPrint: "",
      headers: {
        // 'Content-Type':'multipart/form-data',
        Authorization: "Bearer " + store.getters.access_token
      },
      is_excel: false,
      createBillFlag: false,
      createForm: {
        dateRange: "",
        startDate: "",
        endDate: ""
      },
      // 选中的数据
      choseData: []
    };
  },
  components: {
    Excel_box,
    vGoodsTable,
    vPrint
  },
  props: {
    orderList: Array
  },
  watch: {},
  created() {},
  methods: {
    // 这个是一键下单
    SupplierOrders() {
      if (this.choseData.length) {
        this.$message.success("111");
      } else {
        // 提示选中
        this.$message.error("选中数据");
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    onSelectList(list) {
      this.$refs.excelBox.btnFlag = true;
      let params = {};
      params.list = list;
      importTable(params)
        .then(res => {
          this.$notify({
            title: "提示",
            message: res.data.data,
            duration: 50000
          });
          this.is_excel = false;
        })
        .catch(err => {
          this.$notify({
            title: "提示",
            message: err,
            duration: 50000
          });
        })
        .finally(() => {
          this.$emit("refreshList");
          if (this.$refs.excelBox) {
            this.$refs.excelBox.btnFlag = false;
          }
        });
    },
    printAgain() {
      if (this.headHtmlPrint && this.bodyHtmlPrint) {
        this.printBatch(this.headHtmlPrint, this.bodyHtmlPrint);
      } else {
        this.$message.warning("没有可重新打印的采购单");
      }
    },
    printSelectOrder() {
      let selectOrderList = this.multipleSelection;
      if (selectOrderList.length == 0) {
        this.$message.warning("未选择需打印采购单");
        return;
      }
      this.dialogPrint = true;
      this.headHtmlPrint = "";
      this.bodyHtmlPrint = "";
      this.batchPrint(
        0,
        selectOrderList,
        "",
        "",
        "",
        this.batchPrint,
        this.printBatch
      );
    },
    // 批量打印时 等请求返回 顺序执行
    // 当前采购单索引 / 是否继续请求标识 / 采购单列表
    batchPrint(
      index,
      selectArray,
      headHtml,
      selectBodyHtml,
      msg,
      callback,
      endPrint
    ) {
      this.dialogPrint = true;
      let item = selectArray[index];
      this.checkedItem = item;
      // console.log("request", index, item.buyId, item);
      if (index == selectArray.length - 1) {
        headHtml = this.$refs.printOrderTable.printHeadHtml();
      }
      this.request
        .purchaseList({ buyId: item.buyId, pageSize: 1000 })
        .then(res => {
          this.$message.warning("采购单" + (index + 1) + "  等待数据加载");
          if (res.code == 200) {
            this.goodsList = res.ext.list;
            this.totalGoods = res.ext.totalRows;
          } else {
            this.goodsList = [];
            this.totalGoods = 0;
          }
          // 等待数据加载
          let time = 10 * (this.totalGoods + 1) > time;
          time = time > 500 ? time : 500;
          let _that = this;
          setTimeout(function() {
            if (_that.goodsList.length > 0) {
              let bodyHtml = _that.$refs.printOrderTable.printBodyHtml(
                "buyOrder"
              );
              msg +=
                "<p>#" +
                (index + 1) +
                " 采购单 " +
                item.buyId +
                " 商品数 " +
                _that.goodsList.length +
                "</p>";
              selectBodyHtml =
                selectBodyHtml +
                bodyHtml +
                '<div style="height: 50px;page-break-after:always"></div>';
            }
            _that.dialogPrint = false;
            index++;
            if (index < selectArray.length) {
              callback(
                index,
                selectArray,
                headHtml,
                selectBodyHtml,
                msg,
                callback,
                endPrint
              );
            } else {
              _that.$notify({
                title: "打印的采购单信息:",
                dangerouslyUseHTMLString: true,
                message: msg,
                duration: 0
              });
              _that.headHtmlPrint = headHtml;
              _that.bodyHtmlPrint = selectBodyHtml;
              endPrint(headHtml, selectBodyHtml);
            }
          }, time);
        });
    },
    // 调起批量打印
    printBatch(headHtml, bodyHtml) {
      let newWindow = window.open("", "打印");
      let newHtml =
        "<html>" + headHtml + "<body>" + bodyHtml + "</body></html>";
      newWindow.document.write(newHtml);
      newWindow.document.close();
      newWindow.window.onload = function() {
        newWindow.window.print();
      };
    },
    // 这儿是选中时间
    handleSelectionChange(val) {
      console.log(val);

      this.choseData = val;
      console.log(this.choseData);
      this.multipleSelection = val;
      // console.log("selection", this.multipleSelection);
    },
    buyOrderClose(done) {
      this.$refs.buyOrderInfo.closeShow();
      if (this.$refs.buyOrderInfo.modifyFlag) {
        this.$confirm("有未提交修改信息, 确认关闭?").then(e => done());
      } else {
        done();
      }
    },
    printBuyOrder(item) {
      let params = {
        buyId: item.buyId
      };
      this.request.printBuyOrder(params).then(res => {
        console.log("print", res);
        if (res.code == 200) {
          this.$message.success(res.msg);
          // this.$emit("refreshList")
        } else {
          this.$message.warning("失败：" + res.msg);
        }
      });
    },
    checkDetail(item) {
      //debugger;
      this.checkedItem = item;
      this.purchaseList(item.buyId);
      this.dialogTableVisible = true;
    },
    returnDelete(row) {
      let query = {
        buyId: row.buyId
      };
      this.$router.push({ path: "../../return_order/handleAdd", query: query });
    },
    handleGoodsCommand(command) {
      if (command.type === "handleDelete") {
        this.handleDelete(command.row, command.index);
      } else if (command.type === "return") {
        this.returnDelete(command.row);
      } else if (command.type === "resetBill") {
        this.resetBill(command.row.buyId);
      }
    },
    printTable(item) {
      this.checkedItem = item;
      this.purchaseList(item.buyId);
      this.dialogPrint = true;
    },
    handleDelete(item, index) {
      this.$confirm(
        "您确认要取消" + item.buyerName + "的第" + item.buyId + "号订单吗？"
      ).then(res => {
        this.modifyList({
          buyId: item.buyId,
          buyerId: item.buyerId,
          status: 4
        });
      });
    },
    purchaseList(id) {
      // debugger;
      this.request
        .purchaseList({ buyId: id, pageSize: 1000 })
        .then(res => {
          if (res.code == 200) {
            this.goodsList = res.ext.list;
            this.totalGoods = res.ext.totalRows;
          } else {
            this.goodsList = [];
            this.totalGoods = 0;
            this.$message.warning(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    modifyList(params = {}) {
      this.request.modifyList(params).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.$emit("refreshList");
        } else {
          this.$message.warning("取消失败：" + res.msg);
        }
      });
    },
    onChangeList(changeList) {
      this.goodsList = changeList;
    },
    createBill() {
      if (!this.createForm.dateRange) {
        this.$message.warning("请选择日期范围");
        return;
      }
      let params = {
        startDate: this.createForm.dateRange[0],
        endDate: this.createForm.dateRange[1]
      };
      createBillBatch(params).then(res => {
        if (res.data.code === 0) {
          this.$message.success("操作成功");
          this.createBillFlag = false;
        }
      });
    },
    resetBill(orderSn) {
      resetBill({ orderSn: orderSn }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("操作成功");
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
</style>
